<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>报考信息</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
table {
        width: 800px;
        height: 200px;
        margin: 0 auto;
        background-color: rgb(255, 255, 255);
        }
th, td {
        padding: 20px;
        text-align: left;
        border:1px solid rgb(0, 0, 0);
        padding: 50px;
        margin:50px;
        }
.anniu {
            width: fit-content; 
            margin: 0 auto;
            text-align: center;           
        }
.anniu button {
            margin: 10px;
            cursor: pointer;
            padding: 10px 20px;
        }
 textarea {
            width: 80%;
            height: 50px;
            resize: none; 
        }
</style>
</head>
<body>
<h1 align="center"><font size="10">报考信息</font></h1>
<form action="#" method="post"></form>
<table style="font-size: 16px;">
    <tr>
        <th>姓名</th>
        <td><input type="text" value="贾静文"></td>       
    </tr>
    <tr>
        <th>上传照片</th>
        <td><input type="file" id="fileUpload" accept="image/*">
            <img id="preview" width="300px" height="150px"></td>
    </tr>
    <tr>
        <th>考号</th>
        <td><input type="text" value="20243015079"></td>
    </tr>
    <tr>
        <th>民族</th>
        <td>汉族</td>
    </tr>
    <tr>
        <th for="optionalInput">性别</th>
        <td>
        <input type="radio" name="sex" />男&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" checked="checked" />女
        </td>
    </tr>
    <tr>
        <th><label for="age">年龄</label></th>
        <td><input type="number" id="age" min="1" >
            <button class="btn" id="submitBtn">提交</button></td>
    </tr>
    <tr>
        <th>技能点</th>
        <td><textarea  id="textArea" placeholder="在这里输入长文本..."></textarea>
            <div class="anniu0">
                <button id="saveButton">保存txt</button>
            </div>
        </td>
    </tr> 
</table>
<div class="anniu">
    <button id="printButton">打印保存</button>
</div>
<script type="text/javascript">
    alert('欢迎报考！！！');

        const fileInput = document.getElementById('fileUpload');
        const preview = document.getElementById('preview');
        const ageInput = document.getElementById('age');
        const submitBtn = document.getElementById('submitBtn');
        const skillDescription = document.getElementById('skillDescription');

// 上传照片
fileInput.addEventListener('change', function () {
    const file = fileInput.files && fileInput.files[0];
    if (file) {
        const fileExtension = file.name.split('.').pop().toLowerCase();
        const allowedExtensions = ['jpg', 'jpeg', 'gif'];
        if (allowedExtensions.includes(fileExtension)) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block'; 
            }
            reader.readAsDataURL(file);
        } else {
            alert('请上传一个有效的文件类型（jpg, jpeg, gif）');
            fileInput.value = '';
        }
    }
});

        // 提交按钮
        submitBtn.addEventListener('click', function () {
            const age = parseInt(ageInput.value);

            if (isNaN(age) || age < 18) {
                alert("未满18岁不能提交。");
                return;
            }
            if (age < 18) {
                alert("未满18岁不能提交。");
            } else {
                if (age >= 18) {
                    alert("可以报考");
                }
                let ageCategory = '';
                if (age >= 18 && age <= 25) {
                    ageCategory = '青少年';
                } else if (age > 25 && age <= 30) {
                    ageCategory = '青年';
                } else if (age > 30 && age <= 50) {
                    ageCategory = '中年';
                } else if (age > 50) {
                    ageCategory = '中老年';
                }

                alert(`属于: ${ageCategory}`);
            }
            // 年龄大于18岁，跳转到新页面
            if (age >= 18) {
                // window.location.href = "新页面.html";
                alert('成功报考')
            }
        });
    //打印保存
    document.getElementById('printButton').addEventListener('click', function() {
        window.print();
    });
    
    //技能点 保存txt
    document.getElementById('saveButton').addEventListener('click', function() {
        const text = document.getElementById('textArea').value;
        const blob = new Blob([text], { type: 'text/plain' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = '技能点.txt'; 
        link.click();
        URL.revokeObjectURL(link.href);
    });
</script>
</body>
</html>
